<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-view-handler.html">
<link rel="import" href="../common/cr-date.html">

<polymer-element name="cr-issue-meta" attributes="issue">
    <template>
        <cr-view-handler></cr-view-handler>
        <link rel="stylesheet" href="../common/common.css">
        <style>
            :host {
                display: table;
            }

            .issue-meta-item {
                display: table-row;
            }

            .issue-meta-type,
            .issue-meta-value {
                padding: 0.5em 16px;
                display: table-cell;
            }

            .issue-base-url,
            .issue-target-ref {
                word-break: break-word;
            }

            .issue-meta-type {
                color: #959595;
                font-weight: bold;
                -webkit-user-select: none;
                cursor: default;
            }

            a.approval {
                color: #009933;
            }

            a.disapproval {
                color: #DD4B39;
            }

            @media (max-width: 600px) {
                .issue-meta-type,
                .issue-meta-value {
                    padding: 0.5em 8px;
                }
            }
        </style>
        <template if="{{ issue }}">
            <div class="issue-author issue-meta-item">
                <div class="issue-meta-type">Owner</div>
                <div class="issue-meta-value"><a href="/user/{{ issue.owner.email }}" title="{{ issue.owner.email }}">{{ issue.owner.displayName }}</a></div>
            </div>
            <div class="issue-created issue-meta-item">
                <div class="issue-meta-type">Created</div>
                <div class="issue-meta-value"><cr-date date="{{ issue.created }}"></cr-date></div>
            </div>
            <div class="issue-modified issue-meta-item">
                <div class="issue-meta-type">Modified</div>
                <div class="issue-meta-value"><cr-date date="{{ issue.lastModified }}"></cr-date></div>
            </div>
            <div class="issue-modified issue-meta-item">
                <div class="issue-meta-type">CQ</div>
                <div class="issue-meta-value">
                    <template if="{{ issue.commit }}">
                        <a href="https://chromium-status.appspot.com/cq/{{ issue.author.email }}" target="_blank">Yes</a>
                    </template>
                    <template if="{{ !issue.commit }}">
                        No
                    </template>
                </div>
            </div>
            <div class="issue-reviewers issue-meta-item">
                <div class="issue-meta-type">Reviewers</div>
                <div class="issue-meta-value">
                    <template repeat="{{ user, i in issue.reviewers }}">
                        <a class="issue-reviewer {{ {approval: issue.scores[user.email] == 1, disapproval: issue.scores[user.email] == -1} | tokenList }}" href="/user/{{ user.email }}" title="{{ user.email }}">
                            <template if="{{ issue.requiredReviewers | contains(user.email) }}">*</template>{{ user.displayName }}
                        </a>
                    </template>
                </div>
            </div>
            <div class="issue-cc issue-meta-item">
                <div class="issue-meta-type">CC</div>
                <div class="issue-meta-value">
                    <template repeat="{{ user, i in issue.cc }}">
                        <a class="issue-cced" href="/user/{{ user.email }}" title="{{ user.email }}">{{ user.displayName }}</a>
                    </template>
                </div>
            </div>
            <div class="issue-base-url issue-meta-item">
                <div class="issue-meta-type">Base url</div>
                <div class="issue-meta-value">
                    {{ issue.baseUrl }}
                </div>
            </div>
            <template if="{{ issue.targetRef }}">
                <div class="issue-target-ref issue-meta-item">
                    <div class="issue-meta-type">Target ref</div>
                    <div class="issue-meta-value">{{ issue.targetRef }}</div>
                </div>
            </template>
            <template if="{{ issue.private }}">
                <div class="issue-private issue-meta-item">
                    <div class="issue-meta-type">Private</div>
                    <div class="issue-meta-value">Yes</div>
                </div>
            </template>
        </template>
    </template>
    <script>
        Polymer({
            created: function() {
                this.issue = null;
            },
            contains: function(list, value) {
                return list && list.indexOf(value) != -1;
            },
        });
    </script>
</polymer-element>
